<!-- 查询表单 -->
<div style="margin-top: 10px;margin-bottom: 10px">
  <!-- 姓名输入框 -->
  <input nz-input [(ngModel)]="name" placeholder="请输入姓名" style="width: 200px;margin-left: 10px"/>
  <!-- 性别下拉框 -->
  <nz-select [(ngModel)]="gender" nzPlaceHolder="请选择性别" nzAllowClear style="width: 150px;margin-left: 10px">
    <nz-option nzValue="1" nzLabel="男"></nz-option>
    <nz-option nzValue="0" nzLabel="女"></nz-option>
  </nz-select>
  <!-- 查询按钮：点击触发query()函数 -->
  <button nz-button (click)="query()" nzType="primary" style="margin-left: 10px">查询</button>
  <!-- 清除按钮：点击触发clear()函数 -->
  <button nz-button (click)="clear()" style="margin-left: 10px">清除</button>
</div>
<!-- 分隔线 -->
<nz-divider></nz-divider>
<!-- 员工信息表格
     #basicTable：模板引用变量，用于在组件中引用该表格
     [nzData]="employeesList"：将employeesList数组作为表格的数据源
     [nzFrontPagination]="false"：指定分页位置为前端分页，即通过前端代码控制分页
     [nzTotal]="total"：设置表格数据的总数
     [(nzPageIndex)]="pageNum"：双向绑定当前页码
     [nzPageSize]="pageSize"：设置每页显示的数据条数
     [nzLoading]="loading"：设置表格的加载状态，当loading为true时，表格显示加载动画
     (nzPageIndexChange)="getList()"：当页码改变时调用query()函数获取新的数据 -->
<nz-table #basicTable [nzData]="employeesList" [nzFrontPagination]="false" [nzTotal]="total" [(nzPageIndex)]="pageNum"
          [nzPageSize]="pageSize" [nzLoading]="loading" (nzPageIndexChange)="query()">
  <thead>
  <tr>
    <th>姓名</th>
    <th>性别</th>
    <th>手机号</th>
    <th>邮箱</th>
    <th>入职时间</th>
    <th>操作</th>
  </tr>
  </thead>
  <tbody>
  <!-- 使用ngFor指令遍历basicTable.data数组中的每个元素，并将其渲染为表格行（tr） -->
  <tr *ngFor="let data of basicTable.data">
    <td>{{ data.name }}</td>
    <td>{{ data.gender == '0' ? '女' : '男' }}</td>
    <td>{{ data.phoneNumber }}</td>
    <td>{{ data.email }}</td>
    <td>{{ data.joinDate | date:'yyyy-MM-dd' }}</td>
    <td>
      <!-- 编辑按钮：点击触发编辑模态框 -->
      <a (click)="showEditModel(data.id)">修改</a>
      <nz-divider nzType="vertical"></nz-divider>
      <!-- 删除按钮：确认后触发删除操作 -->
      <a nz-popconfirm
         nzPopconfirmTitle="确认删除?"
         nzPopconfirmPlacement="bottom"
         (nzOnConfirm)="del(data.id)"
         (nzOnCancel)="cancelDel()">删除</a>
    </td>
  </tr>
  </tbody>
</nz-table>

<!-- 员工更新组件，当编辑可见性(editVisible)为true时显示
     该组件接收多个输入属性和一个输出事件：
     - visible: 控制组件是否可见的布尔值，由外部的editVisible决定
     - id: 员工ID，用于在组件内标识指定的员工
     - editData: 编辑时员工的数据，提供给组件以显示当前的编辑内容
     - (update): 当员工数据更新时，触发此事件，调用外部的updateList函数并传递更新后的数据
     该组件不直接返回值，但通过(update)事件向外部发送更新后的数据 -->
<app-employee-update *ngIf="editVisible" [visible]="editVisible" [id]="employeeId" [editData]="editData"
                     (update)="updateList($event)"></app-employee-update>